<template>
  <div class="login-container" :style="{backgroundImage:'url('+bgImg+')'}">
    <el-card class="login-form-layout" shadow="hover">
      <h2 class="login-title color-main">登录系统</h2>
      <el-form ref="dataForm" :model="dataForm" :rules="dataRule" @keyup.enter.native="dataFormSubmit()">
        <el-form-item prop="username">
          <el-input v-model="dataForm.username" placeholder="输入帐号" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="dataForm.password" type="password" placeholder="输入密码" />
        </el-form-item>
        <el-form-item prop="captcha">
          <el-row>
            <el-col :span="14">
              <el-input v-model="dataForm.captcha" placeholder="输入验证码" />
            </el-col>
            <el-col :span="10" class="login-captcha">
              <img :src="captchaPath" alt="看不清,点击刷新!" @click="getCaptcha()">
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="dataFormSubmit()">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import bgImg from '@/assets/img/login_bg.jpg'
import { getCodeImg } from '@/api/login'
import { getUUID } from '@/utils'
export default {
  data() {
    return {
      bgImg: bgImg,
      dataForm: {
        username: 'admin',
        password: 'admin123',
        uuid: '',
        captcha: ''
      },
      dataRule: {
        username: [{
          required: true,
          message: '帐号不能为空',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '密码不能为空',
          trigger: 'blur'
        }]
      },
      captchaPath: ''
    }
  },
  created() {
    this.getCaptcha()
  },
  methods: {
    // 提交表单
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/Login', this.dataForm).then(() => {
            this.$router.push({ path: this.redirect || '/' }).catch(() => {})
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getCaptcha() {
      this.dataForm.uuid = getUUID()
      getCodeImg(this.dataForm.uuid).then(res => {
        this.captchaPath = 'data:image/gif;base64,' + res.data
      })
    }
  }
}
</script>

<style scoped>
  .login-form-layout {
    position: absolute;
    left: 0;
    right: 0;
    width: 360px;
    margin: 150px auto;
  }

  .login-title {
    text-align: center;
  }

  .login-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
  }

  .login-captcha {
    height: 36px;
    line-height: 36px;
  }

  .login-captcha>img {
    margin-left: 12px;
  }
</style>
